<template>
  <div class="warp">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="备件" name="first">
        <div>
          <template>
            <div>
              <el-row :gutter="24">
                <el-form ref="elForm" :model="formData" :rules="rules" size="medium " label-width="80px">
                  <!-- 船舶自购单号 -->
                  <el-col :span="6">
                    <el-form-item label="自购单号" prop="field102">
                      <el-input v-model="formData.field102" placeholder="请输入船舶自购单号" clearable style="width:100%">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <!-- 关键字 -->
                  <el-col :span="6">
                    <el-form-item label="关键字" prop="field102">
                      <el-input v-model="formData.field102" placeholder="请输入关键字" clearable style="width:100%">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <!-- 申请船舶 -->
                  <el-col :span="6">
                    <el-form-item prop="field101" label-width="70px" label="申请船舶">
                      <el-select v-model="formData.field101" placeholder="请选择申请船舶" clearable style="width:100%">
                        <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                          :value="item.value" :disabled="item.disabled"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <!-- 自购状态 -->
                  <el-col :span="6">
                    <el-form-item prop="field101"  label="自购状态">
                      <el-select v-model="formData.field101" placeholder="请选择自购状态" clearable style="width:100%">
                        <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                          :value="item.value" :disabled="item.disabled"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 生成日期 -->
                  <el-col :span="6">
                    <el-form-item  label="申请日期" prop="field103">
                      <el-date-picker type="daterange" v-model="formData.field103" format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd" style="width:100%" start-placeholder="开始日期" end-placeholder="结束日期"
                        range-separator="至" clearable></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <!-- 申请供船日期 -->
                  <el-col :span="6">
                    <el-form-item  label="供船日期" prop="field103">
                      <el-date-picker type="daterange" v-model="formData.field103" format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd" style="width:100%" start-placeholder="开始日期" end-placeholder="结束日期"
                        range-separator="至" clearable></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
              <el-row :gutter="24" class="layout-items-center">
                <el-button size="medium " icon="el-icon-search"  type="primary" @click="submitForm" style="margin-left: 20px;">查询</el-button>
                <el-button size="medium " icon="el-icon-delete"  @click="resetForm">重置</el-button>
                <el-button type="primary" icon="el-icon-plus" size="medium " @click="centerDialogVisible = true"> 新增</el-button>
              </el-row>
              <el-table :data="tableData" style="width: 100%; margin: 20px 0"  border>
                <el-table-column fixed type="index" label="#" width="50">
                </el-table-column>
                <el-table-column fixed prop="date" label="船舶自购单号" min-width="150">
                </el-table-column>
                <el-table-column prop="name" label="申请船舶" min-width="120">
                </el-table-column>
                <el-table-column prop="province" label="申请部门" min-width="120">
                </el-table-column>
                <el-table-column prop="city" label="生成日期" min-width="120">
                </el-table-column>
                <el-table-column prop="address" label="申请供船日期" min-width="120">
                </el-table-column>
                <el-table-column prop="zip" label="采购内容" min-width="120">
                </el-table-column>
                <el-table-column prop="zip" label="自购状态" min-width="120">
                </el-table-column>
                <el-table-column label="操作" min-width="120">
                  <template slot-scope="scope">
                    <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
                      移除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="block layout-justify-end">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                  :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper" :total="400">
                </el-pagination>
              </div>
            </div>
          </template>
        </div>
      </el-tab-pane>
      <el-tab-pane label="物料" name="second"></el-tab-pane>
      <el-tab-pane label="油料" name="third"></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeName: "first",
        formData: {
          field101: undefined,
          field102: undefined,
          field103: undefined,
          field105: undefined,
          field106: [1],
        },
        rules: {
          field101: [],
          field102: [{
            message: "搜索关键字",
            trigger: "blur",
          }, ],
          field106: [],
        },
        field101Options: [{
            label: "选项一",
            value: 1,
          },
          {
            label: "选项二",
            value: 2,
          },
        ],
        field106Options: [{
          label: "隐藏其他人草稿单",
          value: 1,
        }, ],
        checked: false,
        tableData: [{
            date: "SP-S25020601",
            name: "华福油5",
            province: "轮机部",
            city: "2025-02-06",
            address: "2025-03-06",
            zip: "项数：物料/采购项数：1",
          },
          {
            date: "2016-05-02",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-08",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-06",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-07",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
        ],
      };
    },
    created() {},
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      submitForm() {
        this.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          // TODO 提交表单
        });
      },
      resetForm() {
        this.$refs["elForm"].resetFields();
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .warp {
    margin: 15px;
    padding: 15px;
    background: #fff;
    border-radius: 10px;
    height: calc(100vh - 120px);
    overflow: auto;
  }

  ::v-deep .el-tabs__item {
    width: 100px;
    padding: 0;
    text-align: center;
  }

  ::v-deep .el-form-item__label {
    font-size: 12px;
  }

  ::v-deep .el-input__inner {
    padding-right: 10px;
  }

  ::v-deep .el-checkbox__label {
    font-size: 12px;
  }
</style>
